<template>
    <div>
        <el-form ref="form" style="display:flex;justify-content:flex-end">
            <el-form-item>
                <el-button type="primary" @click="add" style="margin-right:20px">增加
                </el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="deleteSelection">批量删除
                </el-button>
            </el-form-item>
        </el-form>

        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border highlight-current-row
            :default-sort="{ prop: 'date', order: 'descending' }" @select-all="handleCheckedAllAndCheckedNone"
            @select="handleCheckedAllAndCheckedNone" @selection-change="handleSelectionChange"
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column property="graphName" label="名称">
            </el-table-column>
            <el-table-column property="description" label="描述">
            </el-table-column>
            <el-table-column property="style" label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.style" alt="图片" style="width:100%;height:100px">
                </template>
            </el-table-column>
            <el-table-column property="type" label="类型">
                <template slot-scope="scope">
                    <router-link :to="{ path: scope.row.url }">{{ scope.row.type }}</router-link>
                </template>
            </el-table-column>
            <el-table-column property="remark" label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.remark" active-color="#13ce66" inactive-color="#ff4949"
                        @change="selectStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="rowEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="rowDel(scope.row.id);">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size="10" :total="100"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 弹出层 -->
        <carousel-chart-add ref="carouselChartAdd" v-if="addShow" :addShow="addShow" @dialogClose="dialogClose"
            @getList="getList">
        </carousel-chart-add>
        <carousel-chart-edit ref="carouselChartAdd" v-if="editShow" :editShow="editShow" @dialogClose="dialogClose"
            @getList="getList" :recorder="formFileds"></carousel-chart-edit>
    </div>
</template>

<script>
import CarouselChartAdd from './carouselChartAdd.vue';
import CarouselChartEdit from './carouselChartEdit.vue';
import { selectAll, del, updateGraph } from '@/api/systemManage/carouselChartManage';

export default {
    name: "carouselChartManage",
    components: {
        CarouselChartAdd,
        CarouselChartEdit
    },
    data () {
        return {
            formFileds: {},
            multipleSelection: null,
            tableData: [],
            addShow: false,
            editShow: false
        }
    },
    methods: {

        // handleRowClick (row, event, column) {

        //     // 仅选中当前行
        //     this.setCurRowChecked(row);
        // },
        handleCheckedAllAndCheckedNone (selection) {

            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
        },

        handleSelectionChange (val) {
            this.multipleSelection = val;
        },
        dialogClose () {

            this.addShow = false;
            this.editShow = false;
        },

        rowEdit (row) {
            // this.$refs.detailRef.handleEdit('qqqq')

            // //当前选中行
            this.formFileds = row;
            this.editShow = true;
        },

        deleteSelection () {

            if (!this.multipleSelection) {
                this.$message.warning('请至少选择一条数据进行删除！')
                return
            } else {

                this.$confirm('数据将会永久删除，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    console.log(this.multipleSelection)

                    // delete (array).then(res => {//接口
                    //     console.log(res);
                    //     this.search();//删除完成后初始化查询列表
                    // })

                })
            }
        },
        rowDel (id) {
            // 让当前删除按钮失焦
            // event.target.blur();

            this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                del('id=' + id).then((res) => {
                    this.$message.success('删除成功');
                    this.getList();
                })
            });
        },
        add () {
            this.addShow = true
        },
        selectStatus (row) {
            if (row.remark) {
                row.remark = 'true'
            } else {
                row.remark = 'false'
            }
            updateGraph(row).then((res) => {
                this.getList()
            })
        },
        getList () {
            selectAll().then((res) => {
                this.tableData = res.data
                this.tableData.forEach(item => {
                    if (item.remark == 'false') {
                        item.remark = false
                    } else {
                        item.remark = true
                    }
                })
            })
        }
    },
    mounted () {
        this.getList()
    }
}
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
